//数据
const infoL = [
  ["product", "实时内存占用情况", "实时内存占用个数", "趋势"],
  ["18:50:01", 400, 400 - 50, 40 + 20],
  ["18:50:02", 444, 400 - 50, 44 + 20],
  ["18:54:03", 545, 500 - 50, 54 + 20],
  ["18:45:04", 233, 200 - 50, 23 + 20],
  ["18:45:05", 322, 300 - 50, 32 + 20],
  ["18:45:06", 432, 400 - 50, 43 + 20],
  ["18:54:07", 434, 400 - 50, 43 + 20],
  ["18:45:08", 224, 200 - 50, 22 + 20],
  ["18:45:09", 543, 500 - 50, 54 + 20],
  ["18:45:10", 656, 600 - 50, 65 + 20],
  ["18:45:11", 242, 200 - 50, 24 + 20],
  ["18:54:12", 342, 300 - 50, 34 + 20],
  ["18:53:13", 345, 300 - 50, 34 + 20],
  ["18:54:14", 564, 500 - 50, 56 + 20],
  ["18:53:15", 455, 400 - 50, 45 + 20],
  ["18:54:16", 645, 600 - 50, 64 + 20],
  ["18:56:17", 453, 400 - 50, 45 + 20],
  ["18:57:18", 768, 700 - 50, 76 + 20],
  ["18:45:19", 435, 400 - 50, 43 + 20],
  ["18:97:20", 465, 400 - 50, 46 + 20],
  ["18:32:21", 456, 400 - 50, 45 + 20],
  ["18:87:22", 567, 500 - 50, 56 + 20],
  ["18:23:23", 436, 400 - 50, 43 + 20],
  ["18:34:24", 345, 300 - 50, 34 + 20],
]

//--------------折线统计图
const redisTableL = echarts.init(document.getElementById("redis-table-l"))
window.onresize = function () {
  redisTableL.resize()
}

const optionL = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      crossStyle: {
        color: "#999",
      },
    },
  },
  toolbox: {
    feature: {
      //   dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ["line", "bar"] },
      restore: { show: true },
      saveAsImage: { show: true },
    },
  },
  legend: {
    // data: info[0],
  },
  dataset: {
    // 提供一份数据。
    source: infoL,
  },
  xAxis: [
    {
      type: "category",
      //   data: day,
      axisPointer: {
        type: "shadow",
      },
    },
  ],
  yAxis: [
    {
      type: "value",
      name: "实时占用情况",
      min: 0,
      max: 1000,
      splitNumber: 5,
      interval: 1000 / 5,
      axisLabel: {
        formatter: "{value}",
      },
    },
    {
      type: "value",
      name: "实时占用个数",
      min: 0,
      max: 100,
      splitNumber: 5,
      interval: 100 / 5,
      axisLabel: {
        formatter: "{value}",
      },
    },
  ],
  series: [
    {
      name: infoL[0][1],
      type: "bar",
      tooltip: {
        valueFormatter: function (value) {
          return value
        },
      },
      itemStyle: {
        normal: {
          label: {
            show: true, //开启显示
            position: "top", //在上方显示
            textStyle: {
              //数值样式
              color: "#5470c6",
              fontSize: 12,
            },
          },
        },
      },
    },
    {
      name: infoL[0][2],
      type: "bar",
      tooltip: {
        valueFormatter: function (value) {
          return value
        },
      },
      //   data: drug,
      itemStyle: {
        normal: {
          label: {
            show: true, //开启显示
            position: "top", //在上方显示
            textStyle: {
              //数值样式
              color: "#92cc76",
              fontSize: 12,
            },
          },
        },
      },
    },
    {
      name: infoL[0][3],
      type: "line",
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value) {
          return value
        },
      },

      itemStyle: {
        normal: {
          label: {
            show: true, //开启显示
            position: "top", //在上方显示
            textStyle: {
              //数值样式
              color: "#fac858",
              fontSize: 12,
            },
          },
        },
      },
    },
  ],
  dataZoom: [
    //x轴拖拽
    {
      show: true,
      start: 40,
      end: 70,
    },
    //y轴拖拽
    {
      //   type: "inside",
      //   start: 94,
      //   end: 100,
    },
    {
      show: false,
      yAxisIndex: 0,
      filterMode: "empty",
      width: 30,
      height: "80%",
      showDataShadow: false,
      left: "93%",
    },
  ],
}
optionL && redisTableL.setOption(optionL)

//右侧
const redisTableR = echarts.init(document.getElementById("redis-table-r"))
console.log(document.getElementById("redis-table-r"))
window.onresize = function () {
  redisTableL.resize()
}

const optionR = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      crossStyle: {
        color: "#999",
      },
    },
  },
  toolbox: {
    feature: {
      //   dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ["line", "bar"] },
      restore: { show: true },
      saveAsImage: { show: true },
    },
  },
  legend: {
    // data: info[0],
  },
  dataset: {
    // 提供一份数据。
    source: infoL,
  },
  xAxis: [
    {
      type: "category",
      //   data: day,
      axisPointer: {
        type: "shadow",
      },
    },
  ],
  yAxis: [
    {
      type: "value",
      name: "实时占用情况",
      min: 0,
      max: 1000,
      splitNumber: 5,
      interval: 1000 / 5,
      axisLabel: {
        formatter: "{value}",
      },
    },
    {
      type: "value",
      name: "实时占用个数",
      min: 0,
      max: 100,
      splitNumber: 5,
      interval: 100 / 5,
      axisLabel: {
        formatter: "{value}",
      },
    },
  ],
  series: [
    {
      name: infoL[0][1],
      type: "line",
      tooltip: {
        valueFormatter: function (value) {
          return value
        },
      },
      itemStyle: {
        normal: {
          label: {
            show: true, //开启显示
            position: "top", //在上方显示
            textStyle: {
              //数值样式
              color: "#5470c6",
              fontSize: 12,
            },
          },
        },
      },
    },
    {
      name: infoL[0][2],
      type: "line",
      tooltip: {
        valueFormatter: function (value) {
          return value
        },
      },
      //   data: drug,
      itemStyle: {
        normal: {
          label: {
            show: true, //开启显示
            position: "top", //在上方显示
            textStyle: {
              //数值样式
              color: "#92cc76",
              fontSize: 12,
            },
          },
        },
      },
    },
    {
      name: infoL[0][3],
      type: "line",
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value) {
          return value
        },
      },

      itemStyle: {
        normal: {
          label: {
            show: true, //开启显示
            position: "top", //在上方显示
            textStyle: {
              //数值样式
              color: "#fac858",
              fontSize: 12,
            },
          },
        },
      },
    },
  ],
  dataZoom: [
    //x轴拖拽
    {
      show: true,
      start: 40,
      end: 70,
    },
    //y轴拖拽
    {
      //   type: "inside",
      //   start: 94,
      //   end: 100,
    },
    {
      show: false,
      yAxisIndex: 0,
      filterMode: "empty",
      width: 30,
      height: "80%",
      showDataShadow: false,
      left: "93%",
    },
  ],
}
optionR && redisTableR.setOption(optionR)
//------------------------------

let OfficeManageData = [
  {
    id: 0,
    key: "https://gitee.com/granadofao/Team8Project",
    job: "miaoshufuwheiwjehwuwehiygwjegwehu",
    jobNum: "x4125wewrw4erwew5e4rw4er45w4er",
  },
  {
    id: 1,
    key: "https://gitee.com/granadofao/Team8Project",
    job: "emtqwehiuimtqwetopqwetqowetmwq",
    jobNum: "x4125wewrw4erwew5e4rw4er45w4er",
  },
  {
    id: 2,
    key: "https://gitee.com/granadofao/Team8Project",
    job: "miaoshufuwheiwjehwuwehiygwjegwehu",
    jobNum: "x4125wewrw4erwew5e4rw4er45w4er",
  },
  {
    id: 3,
    key: "https://gitee.com/granadofao/Team8Project",
    job: "miaoshufuwheiwjehwuwehiygwjegwehu",
    jobNum: "x4125wewrw4erwew5e4rw4er45w4er",
  },
  {
    id: 4,
    key: "https://gitee.com/granadofao/Team8Project",
    job: "rqwuyevrbiqwoemrqweriqwnetwqtoqwiemtq",
    jobNum: "x4125wewrw4erwew5e4rw4er45w4er",
  },
  {
    id: 5,
    key: "https://gitee.com/granadofao/Team8Project",
    job: "rqwuyevrbiqnetwqtoqwiemtq",
    jobNum: "x4125wewrw4erwew5e4rw4er45w4er",
  },
  {
    id: 6,
    key: "https://gitee.com/granadofao/Team8Project",
    job: "miaoshufhiygwjegwehu",
    jobNum: "x4125wewrw4erwew5e4rw4er45w4er",
  },
  {
    id: 7,
    key: "https://gitee.com/granadofao/Team8Project",
    job: "miaoshufuwheiwjejegwehu",
    jobNum: "x4125wewrw4erwew5e4rw4er45w4er",
  },
  {
    id: 8,
    key: "https://gitee.com/granadofao/Team8Project",
    job: "miaoshufuwheiwjehwgwehu",
    jobNum: "x4125wewrw4erwew5e4rw4er45w4er",
  },
  {
    id: 9,
    key: "https://gitee.com/granadofao/Team8Project",
    job: "miaoshufuwheiwjehwegwehu",
    jobNum: "x4125wewrw4erwew5e4rw4er45w4er",
  },
  {
    id: 10,
    key: "https://gitee.com/granadofao/Team8Project",
    job: "miwjehwuwehiygwjegwehu",
    jobNum: "x4125wewrw4erwew5e4rw4er45w4er",
  },
  {
    id: 11,
    key: "https://gitee.com/granadofao/Team8Project",
    job: "miaoshufuwheiygwjegwehu",
    jobNum: "x4125wewrw4erwew5e4rw4er45w4er",
  },
  {
    id: 12,
    key: "https://gitee.com/granadofao/Team8Project",
    job: "miaoshufuwheiwjegwjegwehu",
    jobNum: "x4125wewrw4erwew5e4rw4er45w4er",
  },
  {
    id: 13,
    key: "https://gitee.com/granadofao/Team8Project",
    job: "miaoshufuwheygwjegwehu",
    jobNum: "x4125wewrw4erwew5e4rw4er45w4er",
  },
  {
    id: 14,
    key: "https://gitee.com/granadofao/Team8Project",
    job: "miaoshufuwheiwjegwehu",
    jobNum: "x4125wewrw4erwew5e4rw4er45w4er",
  },
  {
    id: 15,
    key: "https://gitee.com/granadofao/Team8Project",
    job: "miaoshufuwheiwwjegwehu",
    jobNum: "x4125wewrw4erwew5e4rw4er45w4er",
  },
  {
    id: 16,
    key: "https://gitee.com/granadofao/Team8Project",
    job: "miwjehwuwehiygwjegwehu",
    jobNum: "x4125wewrw4erwew5e4rw4er45w4er",
  },
  {
    id: 17,
    key: "https://gitee.com/granadofao/Team8Project",
    job: "miaoshufuwheiwjehwuwehu",
    jobNum: "x4125wewrw4erwew5e4rw4er45w4er",
  },
  {
    id: 18,
    key: "https://gitee.com/granadofao/Team8Project",
    job: "miaoshuiygwjegwehu",
    jobNum: "x4125wewrw4erwew5e4rw4er45w4er",
  },
  {
    id: 19,
    key: "https://gitee.com/granadofao/Team8Project",
    job: "miaoshufuwhygwjegwehu",
    jobNum: "x4125wewrw4erwew5e4rw4er45w4er",
  },
  {
    id: 20,
    key: "https://gitee.com/granadofao/Team8Project",
    job: "miawuwehiygwjegwehu",
    jobNum: "x4125wewrw4erwew5e4rw4er45w4er",
  },
  {
    id: 21,
    key: "https://gitee.com/granadofao/Team8Project",
    job: "miaoshufuwgwehu",
    jobNum: "x4125wewrw4erwew5e4rw4er45w4er",
  },
  {
    id: 22,
    key: "https://gitee.com/granadofao/Team8Project",
    job: "miaoshufuwheiwegwehu",
    jobNum: "x4125wewrw4erwew5e4rw4er45w4er",
  },
  {
    id: 23,
    key: "https://gitee.com/granadofao/Team8Project",
    job: "miaoshufuwhegwehu",
    jobNum: "x4125wewrw4erwew5e4rw4er45w4er",
  },
  {
    id: 24,
    key: "https://gitee.com/granadofao/Team8Project",
    job: "miaoshufuwheiwjhu",
    jobNum: "x4125wewrw4erwew5e4rw4er45w4er",
  },
  {
    id: 25,
    key: "https://gitee.com/granadofao/Team8Project",
    job: "miaoshwuwehiygwjegwehu",
    jobNum: "x4125wewrw4erwew5e4rw4er45w4er",
  },
  {
    id: 26,
    key: "https://gitee.com/granadofao/Team8Project",
    job: "miaoshufuwhjegwehu",
    jobNum: "x4125wewrw4erwew5e4rw4er45w4er",
  },
  {
    id: 27,
    key: "https://gitee.com/granadofao/Team8Project",
    job: "miaoswuwehiygwjegwehu",
    jobNum: "x4125wewrw4erwew5e4rw4er45w4er",
  },
  {
    id: 28,
    key: "https://gitee.com/granadofao/Team8Project",
    job: "miaoshiygwjegwehu",
    jobNum: "x4125wewrw4erwew5e4rw4er45w4er",
  },
  {
    id: 29,
    key: "https://gitee.com/granadofao/Team8Project",
    job: "miaoshufuwheiwjeegwehu",
    jobNum: "x4125wewrw4erwew5e4rw4er45w4er",
  },
]
let showListByData = []
let maxPage
let nowPage = 1
let modifyid
let perNum = 3
let cancelid
initialData()

function initialData() {
  nowPage = 1
  $("#gotoPageInput").val("")
  showPage(OfficeManageData)
  showListBy(OfficeManageData, 1, perNum)
}

function showList(data) {
  $("#OfficeManageList").html("")
  for (let i = 0; i < data.length; i++) {
    $("#OfficeManageList").append(`
        <tr>
            <td class="displayN" >${data[i].id}</td> 
            <td>${data[i].key}</td>  
            <td>${data[i].job}</td>  
            <td>${data[i].jobNum}</td>  
          </tr>
        `)
  }
}
function showListBy(data, pageNum, perNum) {
  let startNum = (pageNum - 1) * perNum
  showListByData = data.slice(startNum, startNum + perNum)
  showList(showListByData)
  let leftNum = pageNum % 5
  if (leftNum == 0) {
    $(".page").eq(4).addClass("active").siblings().removeClass("active")
  } else {
    $(".page")
      .eq(leftNum - 1)
      .addClass("active")
      .siblings()
      .removeClass("active")
  }
  nowPage = pageNum
}

function showPage(data) {
  maxPage = Math.ceil(data.length / perNum)
  let intNum = parseInt(Math.ceil(nowPage / 5))
  intNum--
  intNum = intNum * 5
  $("#pagebox").html("")
  for (let i = intNum + 1; i < intNum + 6; i++) {
    if (i <= maxPage) {
      $("#pagebox").append(`<span class="page">${i}</span>`)
    } else {
      break
    }
  }
  $("#totalNum").html("")
  $("#totalNum").html(`共${maxPage}页`)
}

$("#pagebox").on("click", ".page", function () {
  showListBy(OfficeManageData, parseInt($(this).text()), perNum)
})
//-----------------上下页--------------------------
$("#pre").click(function () {
  if (nowPage > 1) {
    nowPage -= 1
    showPage(OfficeManageData)
    showListBy(OfficeManageData, nowPage, perNum)
  }
})
$("#next").click(function () {
  if (nowPage < maxPage) {
    nowPage += 1
    showPage(OfficeManageData)
    showListBy(OfficeManageData, nowPage, perNum)
  }
})

$("#pageChange").change(function () {
  let Num = $("#pageChange").val()
  if (Num == 0) {
    perNum = 3
    initialData()
  } else if (Num == 1) {
    perNum = 5
    initialData()
  } else if (Num == 2) {
    perNum = 10
    initialData()
  }
})
$("#goTo").click(function () {
  let num = parseInt($("#gotoPageInput").val())
  if (num > 0 && num <= maxPage) {
    nowPage = num
    showPage(OfficeManageData)
    showListBy(OfficeManageData, num, perNum)
  } else {
    alert("请在正确的页码范围内输入")
  }
})
//---------------------删除--------------------------
$("#OfficeManageList").on("click", ".delmodal", function (e) {
  cancelid = parseInt($(this).attr("dataStu"))
})
$("#sureDel").click(function () {
  del(cancelid)
  showPage(OfficeManageData)
  showListBy(OfficeManageData, nowPage, perNum)
})
function del(id) {
  let num = 0
  for (let i = 0; i < OfficeManageData.length; i++) {
    if (id == OfficeManageData[i].id) {
      num = i
      OfficeManageData.splice(i, 1)
      for (let j = num; j < OfficeManageData.length; j++) {
        OfficeManageData[j].id -= 1
      }
    }
  }
}
//----------------------确定修改------------------
$("#OfficeManageList").on("click", ".modify", function (e) {
  modifyid = $(this).attr("dataStu")
  $("#modifyexampleModalLabel").html(`编辑ID:${modifyid}的职务信息`)
  for (let i = 0; i < OfficeManageData.length; i++) {
    if (OfficeManageData[i].id == modifyid) {
      $("#modifyjobName").val(OfficeManageData[i].job)
      $("#modifyjobSerialNum").val(OfficeManageData[i].jobNum)
    }
  }
})

function confirm() {
  let job = $("#modifyjobName").val()
  let jobNum = $("#modifyjobSerialNum").val()
  let j = 0
  let allow = 1
  let str = "其他职务"
  for (let i = 0; i < OfficeManageData.length; i++) {
    if (modifyid != OfficeManageData[i].id) {
      if (job != str) {
        if (OfficeManageData[i].job == job) {
          alert("职务名称已存在")
          allow = 0
        }
      }
      if (OfficeManageData[i].jobNum == jobNum) {
        alert("职务编号已存在")
        allow = 0
      }
    }
  }
  if (allow == 1) {
    for (let i = 0; i < OfficeManageData.length; i++) {
      if (OfficeManageData[i].id == modifyid) {
        j = i
      }
    }
    OfficeManageData[j].job = job
    OfficeManageData[j].jobNum = jobNum
  }
  showPage(OfficeManageData)
  showListBy(OfficeManageData, nowPage, perNum)

  $("#modifyjobName").val("")
  $("#modifyjobSerialNum").val("")
}

function confirmcancel() {
  $("#modifyjobName").val("")
  $("#modifyjobSerialNum").val("")
}
//--------------------------添加-----------------------------
function addconfirm() {
  let job = $("#jobName").val()
  let jobNum = $("#jobSerialNum").val()
  let j = 0
  let allow = 1
  let obj = {}
  for (let i = 0; i < OfficeManageData.length; i++) {
    if (OfficeManageData[i].job == job) {
      alert("职务名称已存在")
      allow = 0
    }
    if (OfficeManageData[i].jobNum == jobNum) {
      alert("职务编号已存在")
      allow = 0
    }
  }
  if (allow == 1) {
    obj.id = OfficeManageData.length
    obj.job = job
    obj.jobNum = jobNum
    OfficeManageData.push(obj)
  }
  nowPage = maxPage
  showPage(OfficeManageData)
  showListBy(OfficeManageData, maxPage, perNum)

  $("#jobName").val("")
  $("#jobSerialNum").val("")
}

function addconfirmcancel() {
  $("#jobName").val("")
  $("#jobSerialNum").val("")
}
